<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>员工年龄统计</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%@ include file="/WEB-INF/view/common.jsp"%>

<link
	href="${path }/resources/css/plugins/bootstrap-table/bootstrap-table.min.css"
	rel="stylesheet">
<link href="${path }/resources/css/animate.css" rel="stylesheet">
<link href="${path }/resources/css/style.css?v=4.1.0" rel="stylesheet">

</head>
<body class="gray-bg">
	<div class="panel-body">
        <div class="row" id="mid" style="width:1200px;height:600px;"></div>

	</div>

    <!--echarts-->
    <script src="${path}/resources/js/echarts.js"></script>
	<script type="text/javascript">
		$(function () {
			init();
		});

		var init = function () {
			$.ajax({
				url:"ageEmployee",
				dataType:"json",
				type:"post",
				success:function(res){
					if(res.success){
						var slist =res.list;
						var xdata=[];
						var ydata =[];
						for (var i = 0;  i< slist.length; i++) {
							xdata[i]=slist[i].age;
							ydata[i]=slist[i].num;
						}
						$(function(){//文档就绪函数
							//基于准备好的dom，初始化echarts实例
                            var chartDom = document.getElementById('mid');
                            var myChart = echarts.init(chartDom);
                            var option={
                                title: {
                                    text: '员工年龄统计',
                                    left: 'left'
                                },
                                xAxis: {
                                    type: 'category',
                                    data: xdata
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        data: ydata,
                                        type: 'line'
                                    }
                                ]
                            };

                           myChart.setOption(option);
						});
					}else{
						alert("处理失败!");
					}
				}
			});
		};
	</script>

</body>
</html>